<template>
	<view>

        <view v-for="(item, index) in jdata" :key="index" class="bd" @click="hux(item.id,loupan_id)">

                <view class="house-type-list card-list-box">
                    <view class="house-type-item">
                        <view class="pic">
                            <img class="lazy-timeout-click" :src="item.image" />
                        </view>
                        <view class="text">
                            <view class="text">
                                <view class="name">
                                    <view class="lb-area"></view>
                                    <h4>{{item.name}}</h4>
                                </view>

                                <view class="area">
                                    建面：<span class="num-area">{{item.area}}</span>
                                </view>

                                <view class="total-price">
                                    参考总价：<span class="price-num">{{item.total}}</span>
                                </view>

                                <view class="h-lb-area">
                                    <span v-for="(item2, index2) in item.cate_type_arr" :key="index2">{{item2}}</span>
                                 
                                </view>

                            </view>
                        </view>
                    </view> 
                </view>     
            </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rema:[
                    { caption:"户型方正" },
                    { caption:"精致" },
                ],
			}
		},
		props: {
			jdata:{
				// type: Array,
				required: true,
			},
			loupan_id:{
			}
		},
		methods: {
              hux(huxing_id,loupan_id){
				this.$common.navigateTo("/pages/index/type/Type?loupan_id="+loupan_id+'&huxing_id='+huxing_id);
			},
		}
	}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0 ;
    list-style: none;
}
.bd{
    padding-bottom: 20rpx;
}
.house-type-list{
    height: 168rpx;
    margin-top: 20rpx;
}

.pic{
    height: 168;
    width: 224rpx;
    float: left;
}
.pic>img{
    height: 168rpx;
    width: 224rpx;
}

.text{
    float: left;
    margin-left: 40rpx;
}

.area,.total-price,.h-lb-area{
    font-size: 24rpx;
    color: #77808a;
    margin-top: 8rpx;
     width: 360rpx;
}
.price-num{
    color: #fa5f35;
    font-weight: 700;
    font-size: 28rpx;
}

.h-lb-area>span{
    height: 36rpx;
    padding: 0 8rpx;
    border:1px solid #77808a;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

</style>
